<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="empcss.css"/>
		<style type="text/css">
			.atime{
				width: 100%;	
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: white;
			}
			.atime>div{
				padding: 10px 20px;	
			}
			.atable{
				width: 100%;
			}
			table{
				width: 90%;
				margin: 20px auto;
				border-radius: 20px;
				background-color: white;
				font-size: 0.8em;
				font-family: "微软雅黑";
			}
			tr{
				text-align: center;
			}
			td{
				width: 20%;
				text-align: center;
				padding: 0.2em;
			}
			.bbt{
				border-bottom: 1px solid #C7C7CC;
			}
			.theader{
				width: 100%;
				background-color: orange;
				color: white;
			}
			.theader>td{
				padding: 0.6em 0;
			}
			.blr{
				border-top-left-radius: 20px;
			}
			.brr{
				border-top-right-radius: 20px;
			}
			.footdiv>div{
				width: 33.3%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.dbr{
				border-right: 1px solid #C7C7CC;
			}
			
			.cmain{
				width: 100%;
				padding-bottom: 5px;
			}
			.topdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-content: center;
				background-color: white;
			}
			.topdiv>div{
				width: 25%;
				height: 3em;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 0.6em;
				border-right: 1px solid #C7C7CC;
			}
			.brno{
				border-right: 0 !important;
			}
			.xian{
				line-height: 1;
			    transition: 0.2s all linear;
			    cursor: pointer;
			    position: relative;
			    padding: 20px;
			}
			.lcs-select::before{
				content: "";
			    position: absolute;
			    top: 0;
			    left: 0%;
			    width: 100%;
			    height: 100%;
			    border-bottom: 2px solid #0062CC;
			    transition: 0.2s all linear;
			}
			.lcs-noselect::before{
				content: "";
			    position: absolute;
			    top: 0;
			    left: 50%;
			    width: 0;
			    height: 100%;
			    border-bottom: 2px solid #0062CC;
			    transition: 0.2s all linear;
			}
			
.nolistdiv{
	width: 100%;
    text-align: center;
    margin-top: 2em;
    color: #7c7c7c;
    border: 0;
    background-color: #EFEFF4;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">员工提成明细</h1>
		</header>
		<div class="mui-content">
			<div class="cmain">
		    	<div class="topdiv" id="topdiv">
			    	<div class="xian lcs-select"  id="1">
			    		商品
			    	</div>
			    	<div class="xian"  id="2">
			    		服务
			    	</div>
			    	<div class="xian" id="3">
			    		充值
			    	</div>
			    	<div class="xian" id="4">
			    		次卡扣减
			    	</div>
		    	</div>
		    </div>
			<!--
            	作者：592176224@qq.com
            	时间：2019-03-08
            	描述：
		    <div class="atime">
		    	<div class="mui-icon mui-icon-arrowleft ">
		    	</div>
		    	<div class="">
		    		2018-12-11
		    	</div>
		    	<div class="mui-icon mui-icon-arrowright ">
		    	</div>
		    </div>
            -->
			
		    <!--
            	作者：592176224@qq.com
            	时间：2019-03-05
            	描述：商品table
            -->
		    <div class="" id="mlist">
		    	
		    </div>
		    
		    <div class="fgd"></div>
		    <div class="footdiv" id="date_typeid">
		    	<div class="select" data-type="date" id="today">
		    		今日
		    	</div>
		    	<div  data-type="date" id="month">
		    		本月
		    	</div>
		    	<div class="" data-type="custom" id="custom">
		    		时间段
		    	</div>
		    </div>
		    
		    <div id="popover" class="mui-popover">
			   <div class="listdiv">
			   		<div class="mui-input-row borbot" >
						<label>开始时间:</label>
			    		<div class="place items">
						    <button id='starttime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
			    		<div class="place items">
						    <button id='endtime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			   </div>
			</div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var date_type = 'date', //查询条件date（时间）  和 custom（时间段） 
			tdate = 'today',	//data_type 为data 填写 today（当天） 和 month（本月）
			start_time = '',	//data_type 为custom 填写开始时间和结束时间
			end_time = '',
			employee_id = 0,	//员工id
			store_id = 0;		//门店id
			gettype = 1,		//table  id
			dlist = {};
			window.onload = function(){
				mui.init();
				employee_id = getrequest().id;
				store_id =  getrequest().sid;
				
				//导航监听
				$("#topdiv").on("tap","div",function(e){
					var target = this.getAttribute('id');
					console.log("target",target);
					if(gettype != target){
						gettype = target;
						setmlist();
						$(this).addClass("lcs-select").removeClass("lcs-noselect").siblings().removeClass("lcs-select").addClass("lcs-noselect");
					}
				})
				//底部div点击监听
				$("#date_typeid").on("tap","div",function(e){
					var tid = this.getAttribute('id');
					if(tid != 'custom'){
						tdate = tid;
						date_type = $(this).data("type");
						$(this).addClass("select").siblings().removeClass("select");
						getemployee_percent();
					}else{
						mui('#popover').popover('toggle',g("popover"));
					}
				})
				
				//时间段监听
				$("#okbut").on("tap",function(e){
					var cus = $("#custom");
					date_type = cus.data("type");
					tdate = cus.attr('id');
					cus.addClass("select").siblings().removeClass("select");
					mui('#popover').popover('hide');
					getemployee_percent();
				})
				
				
				//设置开始时间和结束时间选择
				var starttime = document.getElementById('starttime');
                starttime.addEventListener('tap', function(event) {
                	var starttimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    starttimePicker.show(function(e) {
                    	 starttime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
                
                var endtime = document.getElementById('endtime');
                endtime.addEventListener('tap', function(event) {
                	var endtimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    endtimePicker.show(function(e) {
                    	 endtime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
				
				getemployee_percent();
			}
			
			//获取数据
			function getemployee_percent(){
				var starttime = g("starttime");
				var endtime = g("endtime");
				var stime = starttime.innerText!="开始时间"?starttime.innerText:"";
				var etime = endtime.innerText!="结束时间"?endtime.innerText:"";
				var data = {
					url:"/api/employee/employee_percent",
					data:{
						access_token:acctoken(),
						employee_id:employee_id,
						store_id:store_id,
						date_type:date_type,
						date:tdate,
						start_time:stime,
						end_time:etime
					}
				}
				ajax(data,function(res){
					console.log("数据",res);
					dlist = res.data;
					setmlist();
				})
			}
			
			function setmlist(){
				switch (parseInt(gettype)){
					case 1:
						setgoods();
						break;
					case 2:
						setservice();
						break;
					case 3:
						setrecharge();
						break;
					case 4:
						setconsume();
						break;	
				}
			}
			//商品数据设置
			function setgoods(){
				var str = '';
				if(dlist.goods){
					var list = dlist.goods;
					var glist = list.goods;
					if(glist&&glist.length >0){
						str += '<ul class="mui-table-view">';
						for(var i = 0; i < glist.length; i++){
							str += '<li class="mui-table-view-cell mui-media">'+
			    	        '<a href="javascript:;">'+
			    	        '<div class="mui-media-body">'+
			    	        '<div class="flex-row-between fe08">';
			    	        if(glist[i].order_product && glist[i].order_product.order_number){
			    	        	str += '<span id="">单号：'+glist[i].order_product.order_number+'</span>';
			    	        }else{
			    	        	str += '<span id="">单号：</span>';
			    	        }
			    	        str += '<span id="">日期：'+glist[i].time+'</span>'+
			    	        '</div>'+
			    	        '<div class="flex-row-between fe08">';
			    	        if(glist[i].member){
			    	        	str += '<span id="">会员姓名：'+glist[i].member.username+'</span>';
			    	        }else{
			    	        	str += '<span id="">会员姓名：散客</span>';
			    	        }
			    	        str += '<span id="">商品：'+glist[i].product_name+'</span>'+
			    	        '</div>'+
			    	        '<div class="flex-row-between fe08">'+
			    	        '<span id="">金额：'+glist[i].product_money+'</span>'+
			    	        '<span id="">业绩：'+glist[i].sell_money+'</span>'+
			    	        '</div>'+
			    	        '<div class="flex-row-between fe08">'+
			    	        '<span id="">提成：'+glist[i].percent_money+'</span>'+
			    	        '</div></div></a></li>';
						}
						str += '<li class="mui-table-view-cell mui-media">'+
			    	        '<a href="javascript:;">'+
			    	        '<div class="mui-media-body">合计'+
			    	        '<div class="flex-row-between fe08">'+
			    	        '<span id="">单据数量：'+list.goods_order_count+'</span>'+
			    	        '<span id="">金额：'+list.goods_order_money_all+'</span>'+
			    	        '</div>'+
			    	        '<div class="flex-row-between fe08">'+
			    	        '<span id="">业绩：'+list.goods_order_sell_money_all+'</span>'+
			    	        '<span id="">提成：'+list.goods_order_money_percent_all+'</span>'+
			    	        '</div>'+
			    	        '</div></a></li></ul>';
							}
							else{
								str +='<div class="nolistdiv">暂无数据</div>'
							}
				}else{
					str +='<div class="nolistdiv">暂无数据</div>'
				}
				g("mlist").innerHTML = str;
			}
			//服务数据测试
			function setservice(){
				var str = '';
				if(dlist.service){
					var list = dlist.service;
					var glist = list.service;
					if(glist&&glist.length >0){
						str += '<ul class="mui-table-view" >';
						for(var i = 0; i < glist.length; i++){
						str += '<li class="mui-table-view-cell mui-media">'+
		    	        '<a href="javascript:;">'+
		    	        '<div class="mui-media-body">'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">单号：'+glist[i].order_product.order_number+'</span>'+
		    	        '<span id="">日期：'+glist[i].time+'</span>'+
		    	        '</div><div class="flex-row-between fe08">';
		    	        if(glist[i].member){
		    	        	str += '<span id="">会员姓名：'+glist[i].member.username+'</span>';
		    	        }else{
		    	        	str += '<span id="">会员姓名：散客</span>';
		    	        }
		    	        str += '<span id="">商品：'+glist[i].product_name+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">金额：'+glist[i].product_money+'</span>'+
		    	        '<span id="">业绩：'+glist[i].sell_money+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">提成：'+glist[i].percent_money+'</span>'+
		    	        '</div></div></a></li>';
						
					}
					str += '<li class="mui-table-view-cell mui-media">'+
		    	        '<a href="javascript:;">'+
		    	        '<div class="mui-media-body">合计'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">单据数量：'+list.service_order_count+'</span>'+
		    	        '<span id="">金额：'+list.service_order_money_all+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">业绩：'+list.service_order_sell_money_all+'</span>'+
		    	        '<span id="">提成：'+list.service_order_money_percent_all+'</span>'+
		    	        '</div></div></a></li></ul>';
					}else{
						str +='<div class="nolistdiv">暂无数据</div>'
					}
					
				
				}else{
					str +='<div class="nolistdiv">暂无数据</div>'
				}
				g("mlist").innerHTML = str; 
			}
			//充值数据设置
			function setrecharge(){
				var str = '';
				if(dlist.recharge){
					var list = dlist.recharge;
					var glist = list.recharge;
					if(glist&&glist.length >0){
						str += '<ul class="mui-table-view" >';
					for(var i = 0; i < glist.length; i++){
						str += '<li class="mui-table-view-cell mui-media">'+
		    	        '<a href="javascript:;">'+
		    	        '<div class="mui-media-body">'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">单号：'+glist[i].order_recharge.order_number+'</span>'+
		    	        '<span id="">日期：'+glist[i].time+'</span>'+
		    	        '</div><div class="flex-row-between fe08">';
		    	        if(glist[i].member){
		    	        	str += '<span id="">会员姓名：'+glist[i].member.username+'</span>';
		    	        }else{
		    	        	str += '<span id="">会员姓名：散客</span>';
		    	        }
		    	        if(glist[i].member_level){
		    	        	str += '<span id="">会员卡：'+glist[i].member_level.member_level+'</span>';
		    	        }else{
		    	        	str += '<span id="">会员卡类：</span>';
		    	        }
		    	        str += '</div><div class="flex-row-between fe08">'+
		    	        '<span id="">金额：'+glist[i].recharge_money+'</span>'+
		    	        '<span id="">业绩：'+glist[i].sell_money+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">提成：'+glist[i].percent_money+'</span>'+
		    	        '</div></div></a></li>';
						
					}
					str += '<li class="mui-table-view-cell mui-media">'+
		    	        '<a href="javascript:;">'+
		    	        '<div class="mui-media-body">合计'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">单据数量：'+list.recharge_order_count+'</span>'+
		    	        '<span id="">金额：'+list.recharge_order_money_all+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">业绩：'+list.recharge_order_sell_money_all+'</span>'+
		    	        '<span id="">提成：'+list.recharge_order_money_percent_all.toFixed(2)+'</span>'+
		    	        '</div></div></a></li></ul>';
					}else{
						//TODO handle the exception
						str +='<div class="nolistdiv">暂无数据</div>'
					}
				}else{
					str +='<div class="nolistdiv">暂无数据</div>'
				}
				g("mlist").innerHTML = str;
			}
			
			//次卡数据设置
			function setconsume(){
				var str = '';
				if(dlist.consume){
					var list = dlist.consume;
					var glist = list.consume;
					if(glist&&glist.length >0){
						str += '<ul class="mui-table-view">';
					for(var i = 0; i < glist.length; i++){
						str += '<li class="mui-table-view-cell mui-media">'+
		    	        '<a href="javascript:;">'+
		    	        '<div class="mui-media-body">'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">单号：'+glist[i].order_consume.order_number+'</span>'+
		    	        '<span id="">日期：'+glist[i].time+'</span>'+
		    	        '</div><div class="flex-row-between fe08">';
		    	        if(glist[i].member){
		    	        	str += '<span id="">会员姓名：'+glist[i].member.username+'</span>';
		    	        }else{
		    	        	str += '<span id="">会员姓名：散客</span>';
		    	        }
		    	       
		    	         str += '<span id="">项目名：'+glist[i].consume_name+'</span>'+
		    	        '</div><div class="flex-row-between fe08">'+
		    	        '<span id="">金额：'+glist[i].product_money+'</span>'+
		    	        '<span id="">业绩：'+glist[i].sell_money+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">提成：'+glist[i].percent_money+'</span>'+
		    	        '</div></div></a></li>';
						
					}
					str += '<li class="mui-table-view-cell mui-media">'+
		    	        '<a href="javascript:;">'+
		    	        '<div class="mui-media-body">合计'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">单据数量：'+list.consume_order_count+'</span>'+
		    	        '<span id="">金额：'+list.consume_order_money_all+'</span>'+
		    	        '</div>'+
		    	        '<div class="flex-row-between fe08">'+
		    	        '<span id="">业绩：'+list.consume_order_sell_money_all+'</span>'+
		    	        '<span id="">提成：'+list.consume_order_money_percent_all+'</span>'+
		    	        '</div></div></a></li></ul>';
					}else{
						//TODO handle the exception
						str +='<div class="nolistdiv">暂无数据</div>'
					}
				}else{
					str +='<div class="nolistdiv">暂无数据</div>'
				}
				g("mlist").innerHTML = str;
			}
		</script>
	</body>

</html>